import '../assets/css/home.scss'
import React from 'react';
import { Outlet, useNavigate } from "react-router-dom";

import Nav from '../commonents/Nav'
import { Menu, Layout } from 'antd';
const { Content } = Layout
// import { useState } from 'react';




function getItem(label, key, path) {
    return {
        key,
        label,
        path,
    };
}
const items = [
    getItem('热门推荐', '1', '/home/recommend'),
    getItem('排行榜单', '2', '/home/rank'),
    getItem('个性歌单', '3', '/home/playlist'),
    getItem('主播电台', '4', '/home/djradio'),
    getItem('歌手推荐', '5', '/home/singer'),
    getItem('新碟上架', '6', '/home/album'),
]
function Home() {
    const navigate = useNavigate()
    //     const handleMenuClick = (items) => {
    //         console.log(items)
    //         navigate(items.item.props.path)
    //     }
    // useEffect(()=>{

    // })
    return (
        <div>
            <Nav></Nav>
            <div className='container'>
                <div className='menu'>
                    <Menu
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        mode="inline"
                        theme="light"
                        // inlineCollapsed={collapsed}
                        items={items}
                        onClick={(e) => {
                            if (e.key === '1') {
                                navigate('/home/recommend')
                            } if (e.key === '2') {
                                navigate('/home/rank')
                            } if (e.key === '3') {
                                navigate('/home/playlist')
                            } if (e.key === '4') {
                                navigate('/home/djradio')
                            } if (e.key === '5') {
                                navigate('/home/singer')
                            } if (e.key === '6') {
                                navigate('/home/album')
                            }
                        }}
                    />
                </div>
                <Content className='content'>
                    <Outlet />
                </Content>
            </div>
        </div>
    );
}

export default Home;